<template>
    <div class="head">
        <div class="headContent">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item
                    v-for="item in menuCart"
                    :key="item.index"
                    :index="item.index"
                    >
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>
            </el-menu>
            <div class="OtherInfo">
                <i class="el-icon-s-custom tenant-icon">当前租户：{{name}}</i>
                <div class="fold-icon">
                <el-dropdown >
                    <span class="el-dropdown-link">
                        <i class="el-icon-s-unfold fold-icon"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown></div>
                <i class="el-icon-full-screen full-icon" @click="toggleFullScreen"></i>
            </div>
            
        </div>
    </div>
</template>

<script>
export default {
    name:"PageHeader",
    data(){
        return {
            seen:true,
            name:"博思软件",
            menuCart: [
                {
                index: "1",
                title: "用户中心管理",
                icon: "el-icon-office-building",
                },
                {
                index: "2",
                title: "业务管理系统",
                icon: "el-icon-s-platform",
                },
                {
                index: "3",
                title: "自动化测试系统",
                icon: "el-icon-coordinate",
                },
            ],
        }
    },
    methods:{
        goLogin(){
            this.$router.push('/login');
        },
        toggleFullScreen(){
            if (!document.fullscreenElement) {
                // 浏览器当前不是全屏状态，尝试进入全屏
                document.documentElement.requestFullscreen().catch((err) => {
                    // 处理无法进入全屏的情况
                    console.error(`无法进入全屏模式: ${err.message}`);
                });
            } else {
                // 浏览器当前是全屏状态，尝试退出全屏
                document.exitFullscreen().catch((err) => {
                    // 处理无法退出全屏的情况
                    console.error(`无法退出全屏模式: ${err.message}`);
                });
            }
        }
    }
}
</script>

<style>
.head{
    position: fixed;
    top:45px;
    height: 50px;
    width:100%;
}
.head .headContent{
    position: fixed;
    left:210px;
    width:100%;
}
.tenant-icon{
    position: fixed;
    top:80px;
    right:40px;
}
.fold-icon{
    position: fixed;
    top:80px;
    right:20px;
}
.full-icon{
    position:fixed;
    top:80px;
    right:3px;
    cursor:pointer;
}

</style>